<template>
    <div id="api-demo" class="bg-white rounded-xl shadow-lg p-6 transform transition-all hover:shadow-xl w-full">
      <h2 class="text-xl font-semibold text-indigo-700 mb-4 flex items-center">
        <i class="fas fa-plug mr-2"></i> API 示例
      </h2>
      
      <div class="space-y-4">
        <button 
          @click="callHelloApi" 
          :disabled="loading"
          class="w-full py-3 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition flex items-center justify-center"
          :class="{'opacity-75 cursor-not-allowed': loading}"
        >
          <i v-if="loading" class="fas fa-spinner fa-spin mr-2"></i>
          <i v-else class="fas fa-bolt mr-2"></i>
          调用Hello API
        </button>
        
        <div v-if="apiResponse" class="p-4 bg-indigo-50 rounded-lg transition-all">
          <pre class="text-sm overflow-x-auto">{{ apiResponse }}</pre>
        </div>
        
        <div v-if="error" class="p-3 bg-red-50 text-red-700 rounded-lg">
          <i class="fas fa-exclamation-triangle mr-2"></i>{{ error }}
        </div>
      </div>
    </div>
  </template>
  
  <script>
  
  import { hello } from '@/api/modules/system'
  
  export default {
    name: 'ApiDemo',
    data() {
      return {
        apiResponse: null,
        loading: false,
        error: null
      }
    },
    methods: {
      async callHelloApi() {
        this.loading = true
        this.error = null
        
        try {
          const response = await hello()
          console.info('HelloApi response:', response)
          this.apiResponse = response
        } catch (err) {
          this.error = err.message || '调用API时发生错误'
          console.error('API调用错误:', err)
        } finally {
          this.loading = false
        }
      }
    }
  }
  </script>